@extends('layouts.default')

@section('title')
    开通VIP | @parent
@stop

@section('content')
    <div id='msg_tip' class="alert alert-info" style="display: none"> </div>
    <div class="row">
        
        <div class="col-md-9">
        @foreach($vipInfos as $vipInfo)
            @if ($vipInfo->id==1)
            <div  class="col-md-4 col-sm-6 vip vip-intro-1">
            @elseif ($vipInfo->id==2) 
            <div  class="col-md-4 col-sm-6 vip vip-intro-2">
            @elseif ($vipInfo->id==3) 
            <div  class="col-md-4 col-sm-6 vip vip-intro-3">
            @elseif ($vipInfo->id==4) 
            <div  class="col-md-4 col-sm-6 vip vip-intro-4">
            @elseif ($vipInfo->id==5) 
            <div  class="col-md-4 col-sm-6 vip vip-intro-5">
            @elseif ($vipInfo->id==6) 
            <div  class="col-md-4 col-sm-6  vip vip-intro-6">
           @endif 
                    <div class="vip-card-title"  onclick="make_qr_img('{{ route('users.make_charge_qr', ['id' => $user->id,'price' => $vipInfo->price, 'type' => $payment_type ]) }}',{{$vipInfo->id}},event)" >
                        <span class="card-title-left">
                            DSPSTACK.COM 
                        </span>
                        <span class="card-title-right">
                            {{$vipInfo->name}}
                        </span>
                        
                    </div>
                    <div class="vip-card-content"  onclick="make_qr_img('{{ route('users.make_charge_qr', ['id' => $user->id,'price' => $vipInfo->price, 'type' => $payment_type ]) }}',{{$vipInfo->id}},event)" >
                        {{ $vipInfo->privilege_str}}
                    </div>
                    <div class="price-intro">
                        {{$vipInfo->name}} &nbsp; &nbsp;¥{{ $vipInfo->price}}  
                    </div>
                    <div class="check-status status-{{$vipInfo->id}}"  style="display:none;">
                        <i class="fa fa-check"></i>
                    </div>
                </div>
                
        @endforeach
        </div>
        <div class="col-md-3" style="margin-top:25px;">
            <img id='qr_img' src="{{$qr_img}}" alt="" width="250" style="border: 2px solid #e4e4e4;border-radius: 4px;margin-bottom: 18px;">
            <div id='qr_price' class="alert alert-warning">
              {{$price}} 元
            </div>
        </div>
        
    </div> 

    

@stop
@section('scripts')
    <script>
        var payment_id = {{$payment_id}};
        var int_id = setInterval(tradeStatus,5000);
        $('.status-1').show()
        function tradeStatus()
        {
            $.post("{{route('pay.payment_status')}}",{'payment_id':payment_id},
                function(data)
                {
                    if(data.status == 1)
                    {
                        $('#msg_tip').html(data.msg+',正在跳转请稍后...');
                        $('#msg_tip').css('display','block');
                        setTimeout(function() {location.href = "{{route('users.dcoin_detail', ['id' => $user->id])}}";}, 2 * 1000);
                    }
                });
        }

        function make_qr_img(purl,id,e)
        {
            e.stopPropagation();
            e.preventDefault();
           
            $.post(purl,{'vip_id':id},
                function(data)
                {
                    $('#qr_img').attr('src',data.qr_img);
                    $('#qr_price').html(data.price + ' 元');
                    payment_id = data.payment_id;
                    $('.check-status').hide();
                    $('.status-'+id).show()
                    clearInterval(int_id);
                    int_id = setInterval(tradeStatus,5000);
                });
                
//            $('.dcoin_price').css({"background-color":"#c9daf8","color":"#000"});
//            $('#'+id).css({"background-color":"#86ADD4","color":"#fff"});
        }
        
        {{--function buy(id) {--}}
            {{--var url = "{{route('buy-vip')}}";--}}
            {{--var data = {"id": id};--}}
            {{--$.post(url, data, function (data, textStatus, xhr) {--}}
                {{--if (xhr.status == 201) {--}}
                    {{--alert('充值成功');--}}
                {{--} else {--}}
                    {{--alert('充值失败');--}}
                {{--}--}}
            {{--}, 'JSON');--}}
        {{--}--}}

        function info(price)
        {
            console.log('售价：' + price + '元');
        }
    </script>
@stop